<template>
	<view class="rank-list" v-for="(item,index) in fansList" :key="item.id">
		<view class="avatar-box" @click="toUserPage(item.id)">
			<image v-if="item.avatar!=''" :src="baseUrl+'/'+item.avatar" mode="aspectFill"></image>
			<image v-if="item.avatar==''" src="@/static/images/avatar.png" mode="aspectFill"></image>
		</view>
		<view class="rank-info">
			<view class="rank-item">
				<view class="nickname">
					{{item.username}}
				</view>
				<view class="relationship" v-if="item.relationship==1">
					我的粉丝
				</view>
				<view class="relationship" v-if="item.relationship==3">
					互相关注
				</view>
			</view>
			<view class="adress-info">
				<view class="age-tips" :style="[{backgroundColor:(item.sex==1?'#D9EAFF':'#fff1f3')}]">
					<image v-if="item.sex==1" src="@/static/images/man.png" mode="widthFix"></image>
					<image v-if="item.sex==2" src="@/static/images/women.png" mode="widthFix"></image>
					<view v-if="item.age!=''" :class="[item.sex==1? 'man-age':'woman-age']">
						{{item.age}}后
					</view>
					<view class="age_noselect" v-if="item.age==''">
						未知
					</view>
				</view>
				<view class="city-address">
					{{item.province_text}} {{item.city_text}}
				</view>
				<!-- <view class="city-address">
					ID：{{item.id}}
				</view> -->
			</view>
		</view>
		<view class="invite-btns" @click="toChat(item.id)">
			私信
		</view>
	</view>
	<uv-load-more :status="loadStatus" />
</template>

<script setup>
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		throttle
	} from '@/utils/utils.js'
	import {
		useUserStore
	} from '@/store/modules/user.js'
	import {
		ref
	} from 'vue';
	const userstore = useUserStore()
	const page = ref(1)
	const baseUrl = ref('')
	const fansList = ref([])
	const loadStatus = ref('loadmore')
	onLoad(() => {
		page.value = 1
		userstore.fansList = []
		baseUrl.value = uni.getStorageSync('baseUrl')
		getFansList()
	})
	onReachBottom(() => {
		if (loadStatus.value == 'nomore') {
			return
		}
		page.value++
		getFansList()
	})
	const toUserPage = (userId) => {
		uni.navigateTo({
			url: '/pages/user/userpage/index?userId=' + userId
		})
	}
	const getFansList = async () => {
		loadStatus.value = 'loading'
		let res = await userstore.getFansList({
			page: page.value
		})
		if (res.code == 200 && res.data) {
			let list = res.data.data
			fansList.value = fansList.value.concat(res.data.data)
			// 判断是否还有数据
			if (res.data.current_page >= res.data.last_page) {
				loadStatus.value = 'nomore'
			} else {
				loadStatus.value = 'loadmore'
			}
		} else {
			loadStatus.value = 'nomore'
		}
	}
	const toChat = (conversationID) => {
		// let conversationIDs = `C2C${conversationID}` 
		uni.navigateTo({
			url: `/TUIKit/components/TUIChat/index?conversationID=C2C${conversationID}` + '&userId=' +
				conversationID
		});
	}
</script>

<style lang="scss" scoped>
	.rank-list {
		padding: 26rpx 30rpx 26rpx 30rpx;
		display: flex;
		align-items: center;

		.avatar-box {
			image {
				border-radius: 50%;
				width: 100rpx;
				height: 100rpx;
			}

			.number-one {
				width: 48rpx;
				height: 48rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.rank-info {
			flex: 1;
			margin-left: 24rpx;

			.rank-item {
				display: flex;
				align-items: center;

				.nickname {
					font-weight: bold;
					font-size: 32rpx;
					color: #222222;
				}

				.relationship {
					margin-left: 12rpx;
					width: 112rpx;
					height: 40rpx;
					background: #f6f6f6;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					line-height: 40rpx;
					text-align: center;
					font-weight: 400;
					font-size: 22rpx;
					color: #666;
				}
			}

			.adress-info {
				display: flex;
				align-items: center;
				margin-top: 22rpx;

				.age-tips {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 88rpx;
					height: 32rpx;
					// padding: 8rpx;
					background: #D9EAFF;
					border-radius: 20rpx;

					image {
						width: 20rpx;
						height: 20rpx;
					}

					.man-age {
						padding-left: 4rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #2484FF;
						text-align: center;
					}

					.woman-age {
						padding-left: 4rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #FF4770;
						text-align: center;
					}

				}

				.city-address {
					margin-left: 12rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
			}

		}

		.invite-btns {
			width: 160rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			background: #F6F6F6;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #666666;
		}
	}
</style>